function Swiper(el) {
    
    // 保存大家都需要使用的数据
    this.el = document.querySelector(el)
    this.pages = this.el.querySelectorAll('ul li')
    this.t = null
    this.num = 1
   
    // 启动插件
    this.init()
}

Swiper.prototype.init = function() {
    // 功能
    // - 分页器移入
    this.pageOver()
    // - 分页器移出（住：会调用自动切换轮播图原型方法 体现越细越有利于后期优化
    this.pageOut()
    // - 自动切换轮播图
    this.autoplay()
}

Swiper.prototype.pageOut = function() {
    // 遍历
    this.pages.forEach(item => {
        // 挨个绑定鼠标移出事件
        item.onmouseout = () => {
            // 事件处理函数中：重新调用autoplay（）
            this.autoplay()
        }
        
    });
}

Swiper.prototype.pageOver = function() {
    // 1 获取【当前】盒模型所有分页器（直接用全局的）
    // 2 遍历
    this.pages.forEach((item,i) => {
        // 3 绑定鼠标移入事件（1-清除定时器、2-重置num、3-换成当前图、4-同步分页器）
        item.onmouseover = () => {
            // 1-清除定时器
            clearInterval(this.t)
            // 2-重置num
            this.num = i + 1
            // 换成当前图
            this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
            // 4-同步分页器
            this.tbPage(this.num)
        }
    })
}

Swiper.prototype.autoplay = function() {
    // 1 写定时器每隔2s将图片名num++
    // 2 判断num大于6 就重置为1 
    // 3 切换当前盒模型里面的图片
    // let num = 1
    // 1 是隐试声明的全局变量  
    // 2 第一次swiper t=1  第二次 swiper t=2  第一次保存的标识就被覆盖了 ，到时第一次后期无法清除
    // t = setInterval(() => { // this 父function中this 
    this.t = setInterval((item,i) => {
        this.num++
        if(this.num>6)  this.num=1
        this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
        this.tbPage(this.num)
    }, 1000);
}

Swiper.prototype.tbPage = function(num) {
    // 1 获取当前选中的分页器去掉样式
    this.el.querySelector('ul li.active').className = ''
    // 2 给当前的分页器加样式（规则：li:nth-of-type(${num}等于当前的分页器索引）
    this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
    

}



